<template>
	<view>
		<view class="detail-body">
			<at-user-item size="normal" :info="info" class="user-box">
				<template v-slot:info>
					<view style="padding:10rpx 15rpx;" @click="toUserinfo">查看资料</view>
				</template>
			</at-user-item>
			<view class="title">
				<view class="txt">{{info.projName || '--'}}</view>
				<veiw class="num">{{info.num || '--'}}人</veiw>
			</view>
			<view class="content" v-html="info.projDesc"></view>
			<view class="line">
				<u-divider></u-divider>
			</view>
			<view class="tag-box">
				<text class="tag-item">{{info.depName }}</text>
				<text class="tag-item">{{grade}}</text>
			</view>
		</view>
		<view class="opr-aera">
			<view v-if="isMe" >
				<u-icon v-if="!sendStatus" name="email" label="已投递" size="20" bold color="#dadbde" labelColor="#dadbde"
					></u-icon>
				<u-icon v-else="sendStatus" name="email" label="投递" size="20" bold color="#4b8ff0"
					labelColor="#4b8ff0" @click="showMalsend"></u-icon>
			</view>
			<!-- <u-icon :name="starStatus" :label="ctxt" size="20" :color="ucolor" :labelColor="ucolor" bold @click="collect"> -->
			<!-- </u-icon> -->
			<view>
				<u-icon v-if="starStatus" name="star" label="收藏" size="20" bold @click="collect"> </u-icon>
				</u-icon>
				<u-icon v-else="!starStatus" name="star-fill" label="已收藏" size="20" color="#f5b44d" labelColor="#f5b44d"
					bold @click="collect"> </u-icon>
			</view>

		</view>

		<u-modal :show="showMal" title="填写联系方式" :closeOnClickOverlay="true" showCancelButton @cancel="showMal=false"
			@confirm="sendResume" @close="showMal=false">
			<view class="slot-content">
				<text style="font-size: 14px">填写你的wx/qq确保接收方能够联系到你</text>
				<view style="height: 10rpx;"></view>
				<u--input placeholderStyle="font-size:14px" placeholder="请输入" border="surround" v-model="contact"
					clearable></u--input>
			</view>
		</u-modal>
		
		<u-modal :show="showToEdit" @confirm="toEdit" :closeOnClickOverlay="true"
			showCancelButton @cancel="showToEdit=false" @close="showToEdit=false" title='完善信息'
			content="检测到您还未完善学校信息, 请先完善再投递!(完善信息可以提高投递成功率哦~)">
		</u-modal>
			
	</view>
</template>

<script>
	import {
		projdetail,
		collectproj,
		collectStatus,
		deletecollet,
		sendresume,
		sendstatus
	} from '@/common/http.api.js'
	import AtUserItem from "@/components/AtUserItem"
	export default {
		components: {
			AtUserItem
		},
		data() {
			return {
				showToEdit:false,
				showMal: false,
				isMe:true,
				puserId: '',
				projId: '',
				contact: '',
				info: {},
				cStatus: '',
				sStatus: '',
				reqData: {
					userId: '',
					projId: '',
				},
				timer: null,
			}
		},
		onLoad(options) {
			// console.log(this.$store.state.userId);
			this.projId = options.id
			this.reqData.projId = options.id
			this.reqData.userId = this.$store.state.userId 
		},
		async onShow() {
			this.reqData.userId = this.$store.state.userId  // 再次进来的时候重新vux 重新赋值
			await this.getProjdetail()
			this.getCollectStatus()
			this.sendReStatus()
		},
		computed: {
			grade() {
				if (!this.info.grade) {
					return '年级不限'
				} else {
					return this.info.grade + '级'
				}
			},
			starStatus() {
				return this.cStatus == 0 ? true : false
			},
			sendStatus() {
				return this.sStatus == 0 ? true : false
			}

		},
		methods: {
			showMalsend() {
				if(this.$store.state.userInfo.department == '0'){ // 这个字段表示用户未完善学校信息
					console.log(this.$store.state.userInfo.department);
					return this.showToEdit  = true
				}
				this.showMal = true
			},
			toEdit(){
				uni.navigateTo({
					url:'/pages/editInfo/editInfo'
				})
				this.showToEdit = false
			},
			// 投递状态
			async sendReStatus() {
				let params = {
					senderId: this.$store.state.userId,
					reciverId: this.puserId,
					projId: this.projId,
				}
				const res = await sendstatus(params)
				this.sStatus = res.data.sStatus
			},
			// 投递 
			async sendResume() {
				if (!this.contact) return uni.$showMsg('务必填写联系方式！', 'error')
				let params = {
					senderId: this.$store.state.userId,
					reciverId: this.puserId,
					projId: this.projId,
					contact: this.contact
				}
				const res = await sendresume(params)
				if (res.code === 0) uni.$showMsg('投递成功')
				this.sendReStatus()
				this.showMal = false
			},
			// 收藏状态
			async getCollectStatus() {
				const res = await collectStatus(this.reqData)
				this.cStatus = res.data.cStatus
			},
			async getProjdetail() {
				const res = await projdetail({
					projId: this.projId
				})
				this.info = res.data
				this.puserId = res.data.userId
				// 自己的项目不投递
				if(this.$store.state.userId == this.puserId) this.isMe = false
			},
			collect() {
				if (this.timer) clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					if (this.cStatus === 0) {
						this.collectProj()
					} else {
						this.deleteCollet()
					}
					this.getCollectStatus()
				}, 250)

			},
			//收藏
			async collectProj() {
				const res = await collectproj(this.reqData)
				if (res.code === 0) uni.$showMsg('收藏成功')
			},
			// 取消收藏
			async deleteCollet() {
				const res = await deletecollet(this.reqData)
				if (res.code === 0) uni.$showMsg('取消收藏')
			},
			toUserinfo() {
				uni.navigateTo({
					url: `/pages/resume/resume?userId=${this.puserId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail-body {
		background-color: #fff;
		padding: 15rpx;

		.title {
			margin-top: 15rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;

			.txt {
				font-weight: bold;
				font-size: 18px;
			}

			.num {
				font-weight: bold;
				color: #5098ff;
				font-size: 18px;
			}
		}

		.content {
			padding: 0 15rpx;
			font-size: 15px;
		}

		.line {
			width: 96%;
			margin: auto;
		}

		.tag-box {
			margin: -5rpx 15rpx 15rpx 15rpx;

			.tag-item {
				margin-right: 10rpx;
				padding: 10rpx;
				font-size: 12px;
				border-radius: 5rpx;
				background-color: #f0f2f5;
				color: #494949;
			}
		}

	}

	.opr-aera {
		padding-top: 25rpx;
		display: flex;
		justify-content: space-around;
		align-items: baseline;
		z-index: 99;
		position: fixed;
		bottom: 0;
		height: 120rpx;
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		padding-bottom: constant(safe-area-inset-bottom);
	}
</style>
